<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box{
            width: 400px;
            height: 300px;

            /* 背景 可以理解成 是 这个盒子 下边铺的东西(地板) */
            /* 背景色 */
            background-color: red;
            /* 可以引入背景图片 */
            background-image: url('img/avatar.jpg');
            /* 设置平铺方式  repeat-x  repeat-y  repeat no-repeat*/
            background-repeat: no-repeat;
            /* 背景图片位置调整 */
            /* 第一个值  表示距离左边多少像素
            第二个值  距离噢上边 多少像素 */
            /* background-position: 20px 50px; */
            /* background-position: -50px -20px; */

            /* 关键词描述 */
            /* 左中右 */
            /* 上中下 */
            /* background-position: left top; */

            /* 第二个值不写 默认为 center  */
            /* background-position: left; */
            background-position: center;


            /* 背景滚动  */
            /* fixed  背景图片 不会再随着 盒子 滚动 */
            /* 基于 body 的定位 (参照物)*/
            /* background-attachment: fixed; */

            /* 修改啊背景图片大小 */
            /* background-size: 100% 100%; */
            /* 让图片填充满盒子  图片不形变  但是会有部分内容看不到 */
            background-size: cover;
        }

        .footer{
            height: 3000px;
            
            /* 背景属性的简写  */
            /* background: 背景色 图片 平铺 位置 滚动; */
            background: orange url('img/bg.png') no-repeat center;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="box">
        不凡学院
    </div>
    <div class="footer">
        底部
    </div>
</body>
</html>